{% load static %}
{% for comment in comments %}
<div class="comment-item mb-4 p-3 border rounded" data-comment-id="{{ comment.id }}">
    <!-- 删除按钮固定在右上角 - 修复内容显示 -->
    {% if user.is_authenticated and user == comment.user %}
    <button class="btn btn-sm btn-outline-danger btn-delete-comment"
            data-comment-id="{{ comment.id }}"
            title="删除评论">
        <i class="bi bi-trash"></i> <!-- 确保有图标内容 -->
    </button>
    {% endif %}

    <div class="d-flex align-items-start">
        <!-- 用户头像 -->
        <div class="flex-shrink-0 me-3">
            <a href="{% url 'users:user_profile' comment.user.id %}">
                {% if comment.user.avatar %}
                    <img src="{{ comment.user.get_avatar_url }}"
                         class="rounded-circle"
                         alt="{{ comment.user.username }}"
                         style="width: 40px; height: 40px; object-fit: cover;"
                         onerror="this.src='{% static 'imgs/default-avatar.jpg' %}'">
                {% else %}
                    <img src="{% static 'imgs/default-avatar.jpg' %}"
                         class="rounded-circle"
                         alt="{{ comment.user.username }}"
                         style="width: 40px; height: 40px; object-fit: cover;">
                {% endif %}
            </a>
        </div>

        <!-- 评论内容 -->
        <div class="flex-grow-1">
            <div class="d-flex justify-content-between align-items-start mb-2">
                <div>
                    <strong>
                        <a href="{% url 'users:user_profile' comment.user.id %}" class="text-decoration-none">
                            {{ comment.user.nickname|default:comment.user.username }}
                        </a>
                    </strong>
                    <small class="text-muted ms-2">{{ comment.created_at|date:"Y-m-d H:i" }}</small>
                </div>
            </div>

            <div class="comment-content mb-2">
                {{ comment.content|linebreaksbr }}
            </div>

            <!-- 评论图片展示 - 修复图片变形 -->
            {% if comment.images.all %}
            <div class="comment-images mb-2">
                <div class="row g-2">
                    {% for image in comment.images.all %}
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="comment-image-container">
                            <div class="image-wrapper position-relative"
                                 data-full-image="{{ image.get_image_url }}"
                                 data-thumbnail="{{ image.get_thumbnail_url }}"
                                 style="display: block; width: 100%;">
                                <img src="{{ image.get_image_url }}"
                                     class="img-fluid rounded shadow-sm comment-image-preview"
                                     alt="评论图片"
                                     style="width: 100%; height: 150px; object-fit: cover; cursor: pointer;">

                                <!-- 放大图标 -->
                                <div class="image-overlay">
                                    <i class="bi bi-zoom-in text-white fs-4"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <div class="d-flex gap-2 align-items-center">
                <!-- 点赞按钮 -->
                {% if user.is_authenticated %}
                <button class="btn btn-sm {% if comment.user_has_liked %}btn-danger{% else %}btn-outline-danger{% endif %} btn-like-comment"
                        data-comment-id="{{ comment.id }}">
                    <i class="bi {% if comment.user_has_liked %}bi-heart-fill{% else %}bi-heart{% endif %}"></i>
                    <span class="likes-count">{{ comment.likes_count }}</span>
                </button>
                {% else %}
                <button class="btn btn-sm btn-outline-danger" disabled>
                    <i class="bi bi-heart"></i>
                    <span class="likes-count">{{ comment.likes_count }}</span>
                </button>
                {% endif %}

                <!-- 回复按钮 -->
                {% if user.is_authenticated %}
                <button class="btn btn-sm btn-outline-secondary btn-reply-comment"
                        data-comment-id="{{ comment.id }}"
                        data-username="{{ comment.user.nickname|default:comment.user.username }}">
                    <i class="bi bi-reply"></i> 回复
                </button>
                {% endif %}
            </div>

            <!-- 回复表单（默认隐藏）- 移除图片上传功能 -->
            <div class="reply-form mt-3" id="reply-form-{{ comment.id }}" style="display: none;">
                <form class="reply-comment-form" data-comment-id="{{ comment.id }}">
                    {% csrf_token %}
                    <div class="mb-2">
                        <textarea class="form-control form-control-sm"
                                  name="content"
                                  rows="2"
                                  placeholder="回复 @{{ comment.user.nickname|default:comment.user.username }}..."></textarea>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-sm btn-primary">
                            <i class="bi bi-send"></i> 回复
                        </button>
                        <button type="button" class="btn btn-sm btn-secondary btn-cancel-reply">
                            取消
                        </button>
                    </div>
                </form>
            </div>

            <!-- 回复列表 -->
            {% for reply in comment.replies.all %}
            <div class="comment-reply mt-3 p-2 bg-light rounded" data-comment-id="{{ reply.id }}">
                <!-- 回复删除按钮固定在右上角 - 修复内容显示 -->
                {% if user.is_authenticated and user == reply.user %}
                <button class="btn btn-sm btn-outline-danger btn-delete-comment"
                        data-comment-id="{{ reply.id }}"
                        title="删除回复">
                    <i class="bi bi-trash"></i> <!-- 确保有图标内容 -->
                </button>
                {% endif %}

                <div class="d-flex align-items-start">
                    <!-- 回复者头像 -->
                    <div class="flex-shrink-0 me-2">
                        <a href="{% url 'users:user_profile' reply.user.id %}">
                            {% if reply.user.avatar %}
                                <img src="{{ reply.user.get_avatar_url }}"
                                     class="rounded-circle"
                                     alt="{{ reply.user.username }}"
                                     style="width: 32px; height: 32px; object-fit: cover;"
                                     onerror="this.src='{% static 'imgs/default-avatar.jpg' %}'">
                            {% else %}
                                <img src="{% static 'imgs/default-avatar.jpg' %}"
                                     class="rounded-circle"
                                     alt="{{ reply.user.username }}"
                                     style="width: 32px; height: 32px; object-fit: cover;">
                            {% endif %}
                        </a>
                    </div>

                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <strong>
                                    <a href="{% url 'users:user_profile' reply.user.id %}" class="text-decoration-none">
                                        {{ reply.user.nickname|default:reply.user.username }}
                                    </a>
                                </strong>
                                <small class="text-muted ms-2">回复</small>
                                <strong class="ms-1">
                                    <a href="{% url 'users:user_profile' comment.user.id %}" class="text-decoration-none">
                                        @{{ comment.user.nickname|default:comment.user.username }}
                                    </a>
                                </strong>
                                <small class="text-muted ms-2">{{ reply.created_at|date:"Y-m-d H:i" }}</small>
                            </div>
                        </div>
                        <div class="comment-content mt-1">
                            {{ reply.content|linebreaksbr }}
                        </div>

                        <!-- 回复图片展示 - 修复图片变形 -->
                        {% if reply.images.all %}
                        <div class="comment-images mt-2">
                            <div class="row g-2">
                                {% for image in reply.images.all %}
                                <div class="col-6 col-md-4 col-lg-3">
                                    <div class="comment-image-container">
                                        <div class="image-wrapper position-relative"
                                             data-full-image="{{ image.get_image_url }}"
                                             data-thumbnail="{{ image.get_thumbnail_url }}"
                                             style="display: block; width: 100%;">
                                            <img src="{{ image.get_image_url }}"
                                                 class="img-fluid rounded shadow-sm comment-image-preview"
                                                 alt="回复图片"
                                                 style="width: 100%; height: 120px; object-fit: cover; cursor: pointer;">

                                            <!-- 放大图标 -->
                                            <div class="image-overlay">
                                                <i class="bi bi-zoom-in text-white fs-4"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% empty %}
<p class="text-muted text-center py-4">暂无评论，快来抢沙发吧！</p>
{% endfor %}